<template>
	<tm-fullView>
		<tm-menubars title="横向滚动" color="bg-gradient-primary-lighten" :showback="true"></tm-menubars>
		<view class="mx-32 my-n14 shadow-24 py-24 round-6 white"
			:class="[$tm.vx.state().tmVuetify.black?'grey-darken-5':'']">
			<tm-scroll width="650" color='blue'>
				<tm-grid :list="list3"></tm-grid>
				<tm-grid :list="list3"></tm-grid>
			</tm-scroll>
		</view>
		
		<view class="mx-32 my-n14 shadow-24 py-24 round-6 white"
			:class="[$tm.vx.state().tmVuetify.black?'grey-darken-5':'']">
			<tm-scroll width="650" color='bg-gradient-orange-lighten'>
		
				<tm-row>
					<tm-col :grid="3" v-for="(item,index) in taobao" :key="index">
						<view>
							<tm-images :previmage="false" :width="120" :src="item.icon"></tm-images>
							<view class="text-size-s py-12 text-grey-darken-1">{{item.text}}</view>
						</view>
					</tm-col>
				</tm-row>
				<tm-row>
					<tm-col :grid="3" v-for="(item,index) in taobao" :key="index">
						<view>
							<tm-images :previmage="false" :width="120" :src="item.icon"></tm-images>
							<view class="text-size-s pt-12 text-grey-darken-1">{{item.text}}</view>
						</view>
					</tm-col>
				</tm-row>
		
			</tm-scroll>
		</view>
	</tm-fullView>
</template>

<script>
	import tmScroll from '@/tm-vuetify/components/tm-scroll/tm-scroll.vue';
	import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
	import tmFullView from '@/tm-vuetify/components/tm-fullView/tm-fullView.vue';
	import tmGrid from '@/tm-vuetify/components/tm-grid/tm-grid.vue';
	import tmRow from '@/tm-vuetify/components/tm-row/tm-row.vue';
	import tmCol from '@/tm-vuetify/components/tm-col/tm-col.vue';
	import tmImages from '@/tm-vuetify/components/tm-images/tm-images.vue';
	export default {
		components: {
			tmScroll,
			tmMenubars,
			tmFullView,
			tmGrid,
			tmRow,
			tmCol,
			tmImages
		},
		data() {
			return {
				taobao: [{
						text: '天猫新品',
						iconSize: 100,
						icon: 'https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1'
					},
					{
						text: '今日爆款',
						iconSize: 100,
						icon: 'https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1'
					},
					{
						text: '天猫国际',
						iconSize: 100,
						icon: 'https://gw.alicdn.com/tfs/TB19uWKXkCy2eVjSZPfXXbdgpXa-183-144.png?getAvatar=1'
					},
					{
						text: '饿了么',
						iconSize: 100,
						icon: 'https://gw.alicdn.com/tfs/TB1DaMyVpzqK1RjSZFoXXbfcXXa-185-144.png?getAvatar=1'
					},
					{
						text: '天猫新品',
						iconSize: 100,
						icon: 'https://gw.alicdn.com/tfs/TB1OIxTcLc3T1VjSZLeXXbZsVXa-183-144.png?getAvatar=1'
					},
					{
						text: '今日爆款',
						iconSize: 100,
						icon: 'https://gw.alicdn.com/tfs/TB1LvIxVAvoK1RjSZFDXXXY3pXa-183-144.png?getAvatar=1'
					},
					{
						text: '天猫国际',
						iconSize: 100,
						icon: 'https://gw.alicdn.com/tfs/TB19uWKXkCy2eVjSZPfXXbdgpXa-183-144.png?getAvatar=1'
					},
					{
						text: '饿了么',
						iconSize: 100,
						icon: 'https://gw.alicdn.com/tfs/TB1DaMyVpzqK1RjSZFoXXbfcXXa-185-144.png?getAvatar=1'
					},
				],
				list3: [{
						icon: 'icon-QQ',
						text: 'QQ',
						color: 'blue',
						iconSize: 55,
						dot: true
					},
					{
						icon: 'icon-weibo',
						text: '微博',
						color: 'blue',
						iconSize: 60
					},
					{
						icon: 'icon-pengyouquan',
						text: '朋友圈',
						color: 'green',
						fontColor: 'green',
						iconSize: 55
					},
					{
						icon: 'icon-aliwangwang',
						text: '阿里旺旺',
						color: 'blue',
						dot: true,
						iconSize: 55
					},
					{
						icon: 'icon-aliwangwang',
						text: '阿里旺旺',
						color: 'orange',
						iconSize: 55
					},
					{
						icon: 'icon-aliwangwang',
						text: '阿里旺旺',
						color: 'red',
						iconSize: 55
					},
				],
			};
		}
	};
</script>

<style lang="scss"></style>
